import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import 'css/index/field/plantingSeason.scss'
import { addDragDrop } from '_redux/actions/dragDrops'
import { findPlantingSeasonList, setInSeason, deleteSeason } from 'utils/Api'
import { updateSeason } from '_redux/actions/season'
import { showSeason, updatePlantingSeason } from '_redux/actions/plantingSeason'
import AddSeason from './AddSeason'

class PlantingSeason extends Component {
  constructor() {
    super()
  }
  componentDidMount() {
    this.props.updateSeason([])
    const { feature: {feature}} = this.props
    const id = feature.getId().replace(/tb_farmland./g, '')
    const fd = new FormData()
    fd.append('landId', id)

    findPlantingSeasonList(fd)
      .then(({msg, result}) => {
        if(msg === '200') {
          this.props.updateSeason(result || [])
        }
      })
  }
  addSeason = (e) => {
    e.preventDefault()
    
    const { dragDrops: {dragDrop} } = this.props
    for (let dd of dragDrop) {
      if (dd.id === 'addSeason') {
        return
      }
    }
    this.props.updatePlantingSeason({
      id: Date.now(),
    })
    this.props.addDragDrop({
      title: '种植季信息',
      children: AddSeason,
      id: 'addSeason',
      position: { x: -860 / 2, y: -434 / 2 }
    })
  }
  hidenDragDrop = () => {
    this.props.destroySeason()
  }
  setInSeason = (e) => {
    const id = e.target.getAttribute('land-id')
    const seasonId = e.target.getAttribute('season-id')
    const fd = new FormData()

    fd.append('id', id)
    fd.append('seasonId', seasonId)
    setInSeason(fd)
      .then(({msg}) => {
        if (msg === '200') {
          const fd = new FormData()
          fd.append('landId', id)
          const { feature: { feature } } = this.props
          feature.set('season_id', seasonId)
          findPlantingSeasonList(fd)
            .then(({msg, result}) => {
              if (msg === '200') {
                this.props.updateSeason(result || [])
              }
            })
        }
      })
  }
  deleteSeason = (e) => {
    const id = e.target.getAttribute('id')
    const landId = e.target.getAttribute('land-id')
    const fd = new FormData()

    fd.append('id', id)
    deleteSeason(fd)
      .then(({ msg }) => {
        if (msg === '200') {
          const fd = new FormData()
          fd.append('landId', landId)

          findPlantingSeasonList(fd)
            .then(({ msg, result }) => {
              if (msg === '200') {
                this.props.updateSeason(result || [])
              }
            })
        }
      })
  }
  getSeasonCrops = (item, e) => {
    e.preventDefault()
    this.props.updatePlantingSeason(item)
    this.props.addDragDrop({
      id: 'addSeason',
      title: '种植季信息',
      children: AddSeason,
      position: { x: -860/2, y: -434/2 }
    })
  }
  render() {
    return (
      <div className='plantingSeason'>
        <div className='season-div'>
          <div className='content'>
            <table>
              <tbody>
                {this.props.season.map(item => (
                  <tr key={item.id}>
                    <td className='timer'>
                      <a href="#" onClick={this.getSeasonCrops.bind(this, item)}>{item.name}</a>
                    </td>
                    {
                      item.inSeason === '1' ?
                        <td>
                          <button className='button current' >当季</button>
                        </td> :
                        <td>
                          <button className='button set-current'
                            season-id={item.seasonId}
                            land-id={item.landId}
                            onClick={this.setInSeason}>设为当季</button>
                          <button className='button delete'
                            id={item.id}
                            land-id={item.landId}
                            onClick={this.deleteSeason}>删除</button>
                        </td>
                    }
                  </tr>
                ))}
              </tbody>
            </table>
            <button className='button add' onClick={this.addSeason}>
              添加种植季
            </button>
          </div>
        </div>
      </div>
    )
  }
}
PlantingSeason.propTypes = {
  feature: PropTypes.object,
  season: PropTypes.array,
  updateSeason: PropTypes.func,
  updatePlantingSeason: PropTypes.func,
  destroySeason: PropTypes.func,
  plantingSeason: PropTypes.object,
  addDragDrop: PropTypes.func,
  dragDrops: PropTypes.object
}

// updateSeason
export default connect(({ feature, season, dragDrops }) => ({
  feature,
  season,
  dragDrops
}), dispatch => ({
  updateSeason: season => dispatch(updateSeason(season)),
  showSeason: () => dispatch(showSeason()),
  updatePlantingSeason: plantingSeason => dispatch(updatePlantingSeason(plantingSeason)),
  addDragDrop: children => dispatch(addDragDrop(children))
}))(PlantingSeason)
